<template>
  <el-dialog
    custom-class="dialo-modal"
    v-model="dialogVisible"
    :title="title"
    :width="width"
    :fullscreen="fullscreen"
    :lock-scroll="lockScroll"
    :close-on-click-modal="closeOnClickModal"
    :show-close="true"
    :top="top"
    :before-close="
      (done: Function) => {
        handelCloseCallBack('close', done)
      }
    "
    @close="closeCallBack"
    destroy-on-close
  >
    <template v-if="isShowTitle" #title>
      <div class="dialog-head">
        <slot name="title"></slot>
      </div>
    </template>
    <div class="container scrollbar-bar">
      <slot></slot>
    </div>
    <template #footer v-if="showFooterBtn">
      <span class="dialog-footer">
        <slot name="footer">
          <el-button @click="handelCloseCallBack('cancel')">取 消</el-button>
          <el-button type="primary" @click="handelCloseCallBack('ok')">确 定</el-button>
        </slot>
      </span>
    </template>
  </el-dialog>
</template>

<script lang="ts">
import { computed, defineComponent, ref, watch, onMounted } from 'vue'
import { Utils } from '@/utils'
import * as _ from 'lodash'
import Config from '@/settings'
interface Props {
  modelValue: boolean
  width: string | number
  title: string
  top: string
  fullscreen: boolean
  isShowTitle: boolean
  lockScroll: boolean
  closeOnClickModal: boolean
  showFooterBtn: boolean
  beforeClose?: Function
}

export default defineComponent({
  name: 'Dialog',
  props: {
    modelValue: {
      type: Boolean,
      default: false
    },
    width: {
      type: String || Number,
      default: '50%'
    },
    title: {
      type: String,
      default: '提示'
    },
    top: {
      type: String,
      default: '15vh'
    },
    fullscreen: {
      type: Boolean,
      default: false
    },
    isShowTitle: {
      type: Boolean,
      default: false
    },
    lockScroll: {
      type: Boolean,
      default: true
    },
    closeOnClickModal: {
      type: Boolean,
      default: true
    },
    showFooterBtn: {
      type: Boolean,
      default: true
    },
    beforeClose: {
      type: Function
    }
  },
  emits: ['update:modelValue', 'before-close', 'close', 'handelClick', 'confirm'],
  setup(props: Props, { emit }) {
    const buttonType = ref<string>('')
    // 弹框显隐
    const dialogVisible = computed({
      get: () => props.modelValue,
      set: (val) => emit('update:modelValue', val)
    })

    // 关闭前回调
    const handelCloseCallBack = _.debounce((type: string, done?: Function) => {
      buttonType.value = type
      console.log('type----', type)
      switch (type) {
        case 'close':
          //关闭
          props.beforeClose ? props.beforeClose(done) : done && done()
          break
        case 'cancel':
          //取消
          dialogVisible.value = false
          break
        case 'ok':
          //确认
          emit('confirm', type)
          break
        default:
          emit('handelClick', type)
          break
      }
    }, Config.debounceDelay)

    //关闭dialog后回调
    const closeCallBack = () => {
      // console.log('closeCallBack', buttonType.value)
      emit('close', buttonType.value)
    }

    // 唯一key
    let uniqueKey = Utils.toAnyString()

    watch(
      () => props.modelValue,
      () => {
        uniqueKey = Utils.toAnyString()
      }
    )

    return {
      uniqueKey,
      dialogVisible,
      handelCloseCallBack,
      closeCallBack
    }
  }
})
</script>

<style lang="scss" scope>
$hd_height: 36px;
.dialo-modal {
  // min-width: 840px;
  .el-dialog__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: $hd_height;
    box-sizing: border-box;
    padding: 0 10px;
    background-color: #298db8;
    .el-dialog__title {
      font-size: 18px;
      color: #fff;
    }
    .el-dialog__headerbtn {
      position: inherit;
    }
    .el-dialog__close {
      width: 16px;
      height: 16px;
      border-radius: 50%;
      text-align: center;
      transition: all 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
      transform-origin: 100% 50%;
      background-color: #bbcdff;
      color: #3b83ee;
      cursor: pointer;
      &:before {
        transform: scale(0.8);
        display: inline-block;
      }
      &:hover {
        opacity: 1;
        background-color: #d3dfff;
        color: #486ece;
      }
    }
  }
  .el-dialog__footer {
    text-align: center;
    button {
      width: 100px;
      height: 40px;
      margin-right: 8px;
      // border-radius: 18px;
    }
  }
  .container {
    width: 100%;
    box-sizing: border-box;
    .row-item {
      margin-bottom: 20px;
    }
    .col-title {
      margin: 18px 0 5px;
    }
  }
  .dialog-head {
    height: 35px;
    line-height: 35px;
    color: #fff;
    background-color: rgba(24, 175, 200, 1);
    padding: 0 16px 0 20px;
  }
}
</style>
